<!--
 * @Descripttion: 单日价格设置弹框
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:15:00
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-05-05 15:58:04
-->
<template>
  <KiFormDialog
    :show.sync="form.show"
    title="单日价格设置"
    v-model="formData"
    class="form-dialog"
    width="40%"
    :submit="handleDialogSubmit"
    @close="reset"
  >
    <template #el-form>
      <!-- <div v-if="form.data">
        <div>date={{ form.data.date }}</div>
        <div>data={{ form.data.data }}</div>
        <div>fdData={{ form.data.fdData }}</div>
        <div>oData={{ form.data.oData }}</div>
        <div>fdQuery={{ form.data.fdQuery }}</div>
      </div> -->

      <h2 v-if="form.data">
        <strong v-if="form.data.fdQuery">{{form.data.fdQuery.roomTypeName}}</strong>
        <strong v-if="form.data.fdQuery">{{form.data.fdQuery.roomName}}</strong>
        <strong v-if="form.data.data">{{ $dayjs(form.data.data.day).format('YYYY年MM月DD日')}}</strong>
      </h2>

      <el-form-item
        label="价格"
        prop="salePrice"
        :verify="{ type: 'int',  gt: 0 , lt: 100000 }"
      >
        <el-input
          placeholder="请输入价格"
          v-model="formData.salePrice"
          style="width: 100%"
        >
          <template slot="prepend">¥</template>
          <template slot="append">/ 晚</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="库存"
        prop="inventory"
        :verify="{ type: 'int', gte: 0, lte: 999}"
      >
        <el-input
          placeholder="请输入库存"
          v-model="formData.inventory"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="余量"
        prop="roomStatus"
        v-if="formData.roomStatus"
      >
        <el-input
          v-model="formData.roomStatus"
          style="width: 100%"
          disabled
        >
        </el-input>
      </el-form-item>
    </template>
  </KiFormDialog>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    },
  },
  data() {
    return {
      // 表单数据
      formData: {},
    };
  },
  watch: {
    "form.show": {
      handler(nv, ov) {
        if (nv && !ov) {
          const fd=this.$lo.cloneDeep(this.form.data.oData)  || {}
          fd.salePrice ? fd.salePrice=fd.salePrice/100 : null
          this.formData = fd ;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * 清除验证和数据
     * @return Void
     */
    reset() {
      this.$refs.rowForm && this.$refs.rowForm.clearValidate();
      this.formData = {};
    },
    /**
     * 确认按钮提交
     * form.oData ：选中单元格数据,如果oData有值，则是编辑，否则，新增。
     * @return Void
     */
    handleDialogSubmit() {
      if (this.form.data.oData) {
        this.updateAjax();
      } else {
        this.addAjax();
      }
    },
    /**
     * 新增单日价格数据
     * @param {Object} cf
     * @return Void
     */
    addAjax(cf) {
      if (this.form.loading) {
        return false;
      }
      this.$set(this.form, "loading", true);
      const fdQuery = this.form.data.fdQuery;
      const params = {
        priceDate: this.form.data.data.day,
        hotelId: fdQuery.hotelId,
        roomId: fdQuery.roomId,
        salePrice: Number(this.formData.salePrice)*100,
        inventory: parseInt(this.formData.inventory),
      };
      this.$POST("sot-admin-api/hotel/self-room-price/create", params)
        .then((res) => {
          this.$emit("change", "add");
        })
        .finally( e => {
          this.$set(this.form, "loading", false);
        });
    },
    /**
     * 更新单日价格数据
     * @param {Object} cf
     * @return Void
     */
    updateAjax() {
      if (this.form.loading) {
        return false;
      }
      this.$set(this.form, "loading", true);
      const _data = this.form.data;
      const params = {
        id: _data.fdData[_data.data.day].id,
        salePrice: Number(this.formData.salePrice)*100,
        inventory: parseInt(this.formData.inventory),
      };
      this.$POST("sot-admin-api/hotel/self-room-price/update", params)
        .then((res) => {
          this.$emit("change", "update");
        })
        .finally( e => {
          this.$set(this.form, "loading", false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  h2{
    font-size: 15px;
    padding-bottom: 8px;
    strong{
      margin-right: 12px; 
      &:last-child{
        color:#6c6c6c;
        font-weight: normal;
      }
    }
  }
  .dialog-wrap {
    padding: 28px 28px 0;
  }
}
</style>